Cryptocurrency Tracker

Cryptocurrency tracker that updates with programmed intervals

Links

See project liveGo to GitHub repository

Story

Most people enjoy making investments, selling, buying and all that staff. If you are one of these people, that app is just for you. Crypto Currency Tracker displays the most accurate live prices from the world's most trusted cryptocurrency exchanges. This app connects to the crypto-compare API. It fetches available cryptocurrencies list initially and permits create its pair with PLN, USD, or EUR. Then one can watch changes in 3-seconds intervals. Given is current price as well as both absolute values and percentile change for 1 day, 1 month, 5 months, 12 months, 30 months, and a year. Changes are not only visible in the table, but also signalled by pop-up with adequate message

Tech

This app connects with crypto-compare API. It first obtains a list of accessible cryptocurrencies and allows you to match it with PLN, USD, or EUR.

Then one can observe changes at 3-second intervals. The current price is shown, as well as absolute values and percentile changes for one day, one month, five months, twelve months, thirty months, and one year.Changes are not only displayed in the table, but also indicated by a pop-up with adequate message.

While basic npm packages that subscribe to the data source directly are already available, this app makes direct and immediate API calls.

The List of available cryptos is fetched and stored via React Query.

Similarly, React-Query refetching capability serves to obtain current crypto price with a 3-second interval.

Historical prices are fetched initially once, but the app checks every 3s to see whether current date has changed or not. Also, historical data is refreshed with each new day .

Fetching error or unexpected result (such as empty data) are handled within fetching script or hook with notistack notifications. This script encapsulates error messaging, so no application-wide error handling is required.

The Data, if not kept by React-Query, is kept in local storage to make it continuously available in the event of page refresh

Future plans include making the software more customisable, user could be entitled to modify intervals, for example.

Features

react
react-query
react-router
context
notistack
material-ui
typescript
react-virtualized-select
local storage